<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>播放器</title>
    <style type="text/css">
        html, body {
            width:100%;
            height:100%;
            margin:auto;
            overflow: hidden;
        }
        body {
            display:flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-start;
        }
        #mse {flex:auto;}
    </style>
</head>
<body>
<div id="playerContainer"></div>
<script src="http://bilibili.github.io/flv.js/dist/flv.js" charset="utf-8"></script>
<script type="text/javascript">
    const width = parseInt(window.innerWidth / 8);
    const height = parseInt(window.innerHeight / 8);
    var videoLength = 1;
    var timer;

    function createPlayer () {
        const $video = document.createElement('video');
        const config = {
            // 对SourceBuffer进行自动清理
            autoCleanupSourceBuffer: true,
            // 当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer进行自动清理
            autoCleanupMaxBackwardDuration: 12,
            // 指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
            autoCleanupMinBackwardDuration: 8,
            // 关闭IO隐藏缓冲区
            enableStashBuffer: false,
            // 是否是直播
            isLive: true,
            // 如果有足够的数据回放，中止的http连接。
            lazyLoad: false,
            enableWorker: false,
            stashInitialSize: 128,
            lazyLoadMaxDuration: 3 * 60,
            seekType: 'range',
        };
        $video.muted = true;
        $video.width = width;
        $video.height = height;
        let flvPlayer = flvjs.createPlayer({
            url: 'http://8.142.19.151:6010/hdl/1466683953296576512.flv',
            type: 'flv',
            isLive: true,
            hasVideo: true,
            hasAudio: false,
            withCredentials: false,
        }, config);
        flvPlayer.attachMediaElement($video);
        flvPlayer.load();
        flvPlayer.play();
        document.body.appendChild($video);

        console.log('---------------', $video);
        if (videoLength < 0) {
            timer && clearTimeout(timer);
            return;
        }

        timer = setTimeout(() => {
            videoLength--;
            createPlayer()
        }, 50 * (64 - videoLength))
    }

    createPlayer ();

</script>
</body>
</html>
